<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list">
      <span>{{item.id}}</span>
      <span>{{item.name}}</span>
      <span style="cursor: pointer;" @click="editBtn(index, item.name)">编辑</span>
      <span @click="del(index)" style="cursor:pointer;">x</span>
    </div>

    <div>
      <button type="button" @click="addBtn()">增加</button>
    </div>

    <div class="btn-pop" v-show="pop_show">
      <input type="text" v-model="pop_name" placeholder="请输入姓名" style="margin-top: 30px;">
      <button type="button" @click="add()">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      list: [],
      global_id: 0,
      pop_show: false,
      pop_name: ''
    }
  },
  mounted() {

  },
  methods: {
    addBtn() {
      this.pop_show = true;
    },
    add() {
      const that = this;
      that.is_add = 1;
      that.global_id ++;
      let obj = {id: that.global_id, name: that.pop_name};
      let arr = [];
      arr.push(obj);
      that.list = that.list.concat(arr);

      that.pop_name = '';
      that.pop_show = false;
    },
    del(idx) {
      const that = this;
      that.pop_show = false;
      that.list.splice(idx, 1);

      that.list.forEach((item, index) => {
        item.id = index + 1;
      });

      that.global_id = that.list.length;
    },
    editBtn(idx, name) {
      const that = this;
      that.pop_name = name;
      that.pop_show = true;
    }
  }
}
</script>

<style>
  .list span{
    margin-right: 20px;
  }
  .btn-pop{
    width: 300px;
    height: 80px;
    border: 1px solid #d9d9d9;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -40px;
  }
</style>

